<template>
  <el-container class="container">
    <el-header class="header">
      <el-row>
        <el-col :span="16" class="headerlogo">
          <div class="grid-content bg-purple">
            <img
              style="width:400px;height: 30px"
              src="../assets/image/header.png"
              alt="无法显示图片"
            />
          </div>
        </el-col>
        <el-col :span="8" class="rightsection">
          <div class="grid-content bg-purple-light">
            <span class="el-dropdown-link userinfo-inner">欢迎您，{{ userName }}</span>
            <span class="userinfo-inner" @click="signout">退出</span>
          </div>
        </el-col>
      </el-row>
    </el-header>
    <el-container>
      <el-aside class="aside">
        <el-menu :unique-opened="true" :router="true" class="menu"
                 background-color=" #3A3A3A"
                 text-color="#fff"
                 active-text-color="#ffd04b"
        >
          <el-submenu :index="' '+item1.order" v-for="(item1,index) in menuData" :key="item1.menuLink">
            <!--表示可以展开的一组 -->
            <template slot="title" @click="clickTitle">
              <!--图标 -->
              <i class="el-icon-location"></i>
              <!--文字 -->
              <span>{{item1.menuName}}</span>
            </template>
            <el-menu-item
              class="menuItem"
              @click="clickMenuItem"
              v-for="(item2,index) in item1.children"
              :key="item2.menuLink"
              :index="item2.menuLink"
            >
              <i class="el-icon-location"></i>
              <!--图标 -->
              <span>{{item2.menuName}}</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main class="main">
        <router-view></router-view>
      </el-main>
    </el-container>

  </el-container>

</template>

<script>
import request from "../utils/request";

export default {
  name: "Main",
  data() {
    return {
      isCollapse: false,
      menuData:[],
      userName:''
    };
  },
  methods: {
    //退出
    signout() {
      this.$confirm("退出登录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        request({
          method: "POST",
          url: "/api/User/logout",
        })
          .then(res => {
            if (res.data.status=="1") {
              localStorage.removeItem("islogin")
              localStorage.appToken ="";
              this.$router.push({ path: "/" });
            } else {
              _this.$message(res.data.message);
              return false;
            }
          })
          .catch(err => {
            console.log(err);
          });

      });
    },
    clickMenuItem() {
      console.log("....");
      // this.style.display = "none";
    },
    //回到首页
    clickTitle() {
      // this.style.display = "block";
    },
  },
  mounted(){
    var _this = this;
    this.userName =  localStorage.userName;
    //获取当前用户授权菜单
    request({
      method: "POST",
      url: "/api/UserMenu/getCurrentUserMenus",
      })
      .then(res => {
        if (res.data.status=="1") {
          _this.menuData = res.data.list;
        } else {
          _this.$message(res.data.message);
          return false;
        }
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>

<style scoped>
.menu {
  background: none;
  color: #fff;
}
.container {
  height: 100vh;
  font-size: 15px;
}
.header {
  background: #212121;
  color: #fff;
}
.aside {
  background: #3a3a3a;
  color: #fff;
  /* height: 100%; */
}
.main {
  /* height: 100%; */
  color: #212121;
}
.headerlogo {
  line-height: 60px;
  margin-top: 10px;
}
.rightsection {
  line-height: 60px;
  text-align: right;
}
</style>
